<template>
  <Button
    :type="bloc.type"
    :size="bloc.size"
    :long="bloc.long"
    :disabled="bloc.disabled"
    :loading="bloc.loading"
    :icon="bloc.icon"
    @click="handleClickLink">
    <slot></slot>
  </Button>
</template>

<script lang="ts">
  import {Component, Prop, Vue} from 'vue-property-decorator';
  import {AppButtonBloc} from './bloc/AppButtonBloc';

  @Component
  export default class AppButton extends Vue {
    @Prop()
    readonly type?: string;

    @Prop()
    readonly size?: string;

    @Prop()
    readonly long?: boolean;

    @Prop()
    readonly disabled?: boolean;

    @Prop()
    readonly loading?: boolean;

    @Prop()
    readonly icon?: string;

    handleClickLink(event) {
      this.$emit('click', event);
    }

    bloc = new AppButtonBloc();

    mounted() {
      this.bloc.type = this.type || 'default';
      this.bloc.size = this.size || 'default';
      this.bloc.long = this.long || false;
      this.bloc.disabled = this.disabled || false;
      this.bloc.loading = this.loading || false;
      this.bloc.icon = this.icon || '';
    }
  }
</script>

<style lang="less" scoped>

</style>
